<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/3.register.css">
</head>

<body>
    <top></top>
    <!-- 中心区域 -->
    <div class="core">
        <img src="img/登入图片.jpg" alt="">
        <!-- 白色正方形区域 -->
        <div class="zheng">
            <div class="xiaozheng">
                <!-- 头部空白区域 -->
                <div class="blank"></div>
                <!-- 注册总区域 -->
                <div class="register">
                    <!-- 手机和邮箱注册头部区域 -->
                    <div class="PShort">
                        <a href="javascript:;" class="phone">手机注册</a>
                        <a href="javascript:;" class="maixbox">邮箱注册</a>
                    </div>
                    <!-- 表单区域 -->
                    <!-- 手机注册区域 -->
                    <div class="shouji">
                        <form action="">
                            <h5>请输入<span class="shouNum">手机号码</span>注册:</h5>
                            <input type="text" placeholder="手机号码">
                            <input type="text" placeholder="图片验证码">
                            <div class="last">
                                <input type="checkbox">
                                我已充分阅读、理解并接受<span class="gg">个人信息保护政策</span>的全部内容
                            </div>
                            <input type="submit" value="确定" class="sing_in">
                        </form>
                    </div>
                    <!-- 邮箱注册区域 -->
                    <div class="youxiang">
                        <form action="">
                            <h5>请输入<span class="you">邮箱地址</span>注册：</h5>
                            <input type="text" placeholder="邮箱地址">
                            <input type="text" placeholder="登录密码">
                            <input type="text" placeholder="图片验证码">
                            <div class="blast">
                                <input type="checkbox">
                                我已充分阅读、理解并接受<span class="gg">个人信息保护政策</span>的全部内容
                            </div>
                            <input type="submit" value="确定" class="sing_in">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <bottom></bottom>
</body>

</html>
<script src="js/jQuery.js"></script>
<script>
    $("top").load("1.header.html");
    $("bottom").load("1.bottom.html");

    // 点击头部手机注册区域发生以下变化
    $(".phone").click(function () {
        // 头部手机注册区域高亮
        $(".phone").css({
            "backgroundColor": "black",
            "color": "white",
            "opacity": "1"
        })
        // 头部邮箱注册区域高亮消失
        $(".maixbox").css({
            "backgroundColor": "black",
            "color": "gray",
            "opacity": "0.3"
        });
        // 手机区域高度发生变化
        $(".shouji").show().css({
            "height": "250px",
        })
        // 文字为手机号码透明度为1
        $(".shouNum").css({
            "opacity": "1"
        })
        // 文字为邮箱注册透明度为0
        $(".you").css({
            "opacity": "0"
        })
        // 邮箱盒子消失
        $(".youxiang").hide();
    })

    // 点击头部邮箱注册区域发生变化
    $(".maixbox").click(function () {
        $(".maixbox").css({
            "backgroundColor": "black",
            "color": "white",
            "opacity": "1"
        })
        $(".phone").css({
            "backgroundColor": "black",
            "color": "gray",
            "opacity": "0.3"
        });
        $(".youxiang").show().css({
            "height": "400px"
        });

        $(".you").css({
            "opacity": "1"
        })
        $(".shouNum").css({
            "opacity": "0"
        })
        $(".shou").hide()
    })


</script>